<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-datepicker>
				<div class="Filter">
					<el-select
						size="mini"
						filterable
						placeholder="时间筛选"
						v-model="selects.timeType"
						style="margin-right: 10px;width:120px;"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>
					<date-picker
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
			</template>
			<template #slot-export>
				<el-button size="mini" type="primary" @click="exportRankReport"
					><i class="el-icon-download"></i>导出报表</el-button
				>
			</template>
			<template #slot-statuspicker>
				<el-select
					size="mini"
					filterable
					v-model="selects.status"
					placeholder="订单状态"
					style="margin-right: 10px;width:120px;padding-left: 10px;"
					@change="val => refresh({ tkStatus: val, page: 1 })"
				>
					<el-option label="全部订单" value></el-option>
					<el-option label="订单结算" :value="3"></el-option>
					<el-option label="订单付款" :value="12"></el-option>
					<el-option label="订单失效" :value="13"></el-option>
					<el-option label="订单成功" :value="14"></el-option>
				</el-select>
			</template>
			<template #table-column-goodInfo="{scope}">
				<goodInfo :item="scope.row"></goodInfo>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import goodInfo from './components/orderList/ranking-goods';
import moment from 'moment';
import platform from '@/mixin/platform';
import { download } from '@/utils/index';
export default {
	data() {
		return {
			accountList: [],
			categoryFilter: [],
			category: '',
			crud: null,
			selects: {
				accval: '',
				timeType: 0,
				isFree: '',
				isTLJ: '',
				status: '',
				source: null
			}
		};
	},
	mounted() {
		// 获取帐号筛选列表
		this.$service.goodsMenagement.getTljAccountList
			.page({
				page: 1,
				size: 100,
				sort: 'desc',
				order: 'createTime'
			})
			.then(res => {
				var temp = res.list;
				var target = [];
				for (var i = 0; i < temp.length; i++) {
					target[i] = { label: temp[i].account, value: temp[i].id };
				}
				this.accountList = target;
			});
		// 获取百万补贴商品分类
		this.$service.goodsMenagement.specialClassify
			.page({
				page: 1,
				size: 60,
				sort: 'asc',
				order: 'level',
				specialType: 100
			})
			.then(res => {
				var temp = res.list;
				var target = [];
				for (var i = 0; i < temp.length; i++) {
					target[i] = { label: temp[i].mainName, value: temp[i].floorId };
				}

				// var str = JSON.stringify(target);
				// str = str.substring(1, str.length - 1);
				// str = '[{"label":"全部", "value":""},' + str + ']';
				this.categoryFilter = target;
			});
	},
	components: {
		DatePicker,
		goodInfo
	},
	filters: {
		serviceNum(val) {
			return (val * 0.05).toFixed(2);
		}
	},
	mixins: [platform],
	methods: {
		getType(val) {
			// 格式化类目名称
			let arr = (val || '').split(',');
			let category = this.categoryFilter;
			let result = '';
			for (let index = 0; index < arr.length; index++) {
				for (let index_ = 0; index_ < category.length; index_++) {
					if (arr[index] == category[index_].value) {
						result += category[index_].label + ', ';
					}
				}
			}
			result = result.substring(0, result.length - 2);
			return result;
		},
		toStamp(stamps) {
			return moment(stamps).format('YYYY-MM-DD HH:mm:ss');
		},
		orderExport() {
			this.$service.statisticalForm.orderList
				.millionExport(this.params)
				.then(res => {
					download({
						data: res,
						fileName: `订单列表-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		exportRankReport() {
			this.$service.statisticalForm.orderList
				.millionItemRankExport({
					startTime: this.crud.getData('params').startTime,
					endTime: this.crud.getData('params').endTime,
					isJd: 1
				})
				.then(res => {
					download({
						data: res,
						fileName: `京礼金出单排行-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.statisticalForm.orderList)
				.set('dict', {
					api: {
						page: 'millionItemRank'
					},
					label: {
						add: '添加用户'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'center',
							width: '550px'
						},

						{
							label: '有效佣金',
							prop: 'orderCommission',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '消耗淘礼金',
							prop: 'tljMoney',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '总订单数',
							prop: 'orderNum',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '失效订单数',
							prop: 'invalidOrderNum',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '有效订单数',
							prop: 'validOrderNum',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						visible: false
					},
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'orderNum'
						}
					}
				})

				.set('layout', [
					[
						'refresh-btn',
						'slot-statuspicker',
						'slot-datepicker',
						'slot-export',
						'flex1',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])

				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				order: 'desc',
				prop: 'orderNum'
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>
<style lang="scss" scoped>
.Filter {
	margin-right: 10px;
	.title {
		margin-right: 10px;
		font-size: $font14;
		color: #666;
	}
}
.tips {
	color: #f14d27;
}
</style>

<style lang="stylus" scoped>
// 格式化crud
.cl-crud {
  padding: 0;

  >>>.el-row.el-row--2 {
    padding: 0 10px;
  }

  >>>.crud-data-table {
    padding: 0 10px;
  }

  >>>.el-row:last-child {
    padding: 0 10px;
  }
}
</style>
